<template>
	<view class="box" :style="{ overflow: showWant? 'hidden' : 'auto' }">
		<uNavbar title="" :bgColor="backgroundColor"></uNavbar>
		<!-- 商品 -->
		<view class="commodity flex_Z">
			<view class="commodity_top">
				<image class="tupians" :src="infoDetail.consignment_3d_image" mode="aspectFit"></image>
			</view>
			<view class="commodity_btm flex_ZC">
				<view class="commodity_btm_box">
					<view class="commodity_name flex_c">
						<text :class="checkLength(nickname)>8 ? 'namess':'names'">{{infoDetail.consignment_name}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 发行方 -->
<!-- 		<view class="issuer flex_Z">
			<view class="issuer_box flex_dq">
				<image :src="shopBrand.logo" mode="aspectFill"></image>
				<view class="issuer_btm flex_Z">
					<text class="f28">发行方</text>
					<text class="f24 c9">xxxxxxxxxx</text>
				</view>
			</view>
		</view> -->
		<view class="notice_box flex_ZC">
			<view class="notice flex_c">
				<text class="tiao"></text>
				<text>购买需知</text>
				<text class="tiao"></text>
			</view>
			<view class="xuzhi">
				<rich-text class="f24 colors" :nodes="nodeCentent"></rich-text>
			</view>
		</view>
		<view class="technology flex_c">
			<image src="../../static/image/thl.png" mode=""></image>
		</view>
		<view class="buy_btn flex_ld_a">
			<text class="ssss" @click="submitPay">立即购买</text>
		</view>
		<view class="empty3"></view>

		<!-- 立即购买弹窗 -->
		<u-overlay :show="showWant" zIndex="999" @click="showWant = false">
			<view class="want_box flex_Z" @tap.stop>
				<view class="want ">
					<view class="want_tit flex_dq">
						<text class="f36">今日销售</text>
						<text class="f36">（{{realTimeSales}}份）</text>
					</view>
				</view>
				<view class="choice flex_ld">
					<view class="choice_l flex_c" @click="isChange">
						<text class="f28">价格</text>
						<view class="choice_r flex_Z">
							<u-icon name="arrow-up" :color="taggle == 1? '#d67d04':'#333333'" size="10"></u-icon>
							<u-icon name="arrow-down" :color="taggle == 1? '#333333':'#d67d04'" size="10"></u-icon>
						</view>
					</view>
				</view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="isScrolltolower">
					<view class="list_s flex_Z " v-for="(item,index) in marketAllList" :key="index">
						<view class="csqx" :class="item.is_member?'me_daoj':''" @click="goBuy(item)">
							<view class="list_s_box flex_ld">
								<text class="f28">{{item.consignment_name}} x {{item.amount}}</text>
								<view class=" flex_dq">
									<text v-show="item.is_member" class="f28 c2 mys">我的</text>
									<text v-show="!item.is_member" class="f28 c5" >去购买</text>
									<u-icon v-show="!item.is_member" name="arrow-right" color="#A68A64"
										size="16"></u-icon>
								</view>
							</view>
							<view class="list_s_box flex_ld">
								<view class=" flex_dq">
									<image class="fhtb" src="../../static/icon/fhtb.png" mode=""></image>
									<text class="f32">单价:{{item.price}}</text>
								</view>
								<view class=" flex_dq">
									<image class="fhtb" src="../../static/icon/fhtb.png" mode=""></image>
									<text class="f32">总价:{{item.actual}}</text>
								</view>
							</view>
						</view>
					</view>
					<noDatas :xxxList="marketAllList" :showMore="false" :status="status"></noDatas>
					<view class="empty3"></view>
				</scroll-view>
			</view>
		</u-overlay>

		<!-- 支付弹窗 -->
		<u-popup :show="showPay" @close="showPay = false" closeable bgColor="transparent">
			<view class="pay flex_ZC">
				<text>购买信息</text>
				<view class="pay_box flex_Z">
					<view class="pay_box_c flex_ld">
						<text>藏品名称</text>
						<text class="c3">{{temporary.consignment_name}}</text>
					</view>
					<!-- <view class="pay_box_c flex_ld">
						<text>购买数量</text>
						<text class="c3">x{{temporary.amount}}</text>
					</view> -->

					<view class="pay_money  flex_ld">
						<text>应支付金额</text>
						<view class=" flex_dq">
							<image class="pay_img" src="../../static/icon/i_money.png" mode=""></image>
							<text class="c3 go_pay">{{temporary.actual}}</text>
						</view>
					</view>
				</view>
				<view class="buyNow flex_c" @click="goPay">
					<text>立即支付</text>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		marketList,
		integralMarketList,
		propmarketList,
	} from "../../api/store.js";
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				scrollTop: 0,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				jfType: '', //商品id
				nickname:'',
				realTimeSales: '', //实时销售
				nodeCentent: '', //富文本
				amountPx: 'amount asc',
				showWant: false, //弹窗
				showPay: false, //支付弹窗
				taggle: true, // 价格升降
				scrollStatus: false,
				marketAllList: [], //正在出售的商品
				temporary: {}, //暂存购买的商品信息
				infoDetail: {},
				backgroundColor: "transparent", //标题背景颜色
				overflow: "hidden",
			}
		},
		onLoad(e) {
			console.log(e);
			this.jfType = e.type
		},
		onShow(e) {
			// 每次到详情关闭所有弹窗
			this.showPay = false
			this.page = 1
			this.amountPx = 'amount asc',
			this.marketAllList = []
			this.isGoodsInfo()
		},
		methods: {
			// 动态计算字体大小
			checkLength(v) {
				console.log(v);
				const realLength = v.length;
				return realLength;
			},
			
			// 产品详情
			isGoodsInfo() {
				let data = {
					page: this.page,
					wallet_type: this.jfType,
					order_by:this.amountPx,
				};
				integralMarketList(data).then(res => {
					console.log(res)
					let list = res.data.list.data
					this.marketAllList = this.page4 == 1 ? list : this.marketAllList.concat(list);
					console.log(this.marketAllList);
					this.infoDetail = res.data.setting
					this.realTimeSales = res.data.day_sale
					this.nickname = res.data.setting.consignment_name
					if (list.length < this.size) {
						console.log(1111);
						this.scrollStatus = true
						this.status = 'nomore';
					} else {
						console.log(23222);
						this.scrollStatus = false
						this.status = 'loading';
					}
					const regex = new RegExp('<img', 'gi');
					var htmlContent = res.data.setting.consignment_buy_tip;
					htmlContent = htmlContent.replace(regex, `<img style="max-width: 100%;margin:6px 0"`)
					this.nodeCentent = htmlContent;
				})
			},
			// 切换
			isChange() {
				this.taggle = !this.taggle
				if (this.amountPx == 'amount asc') {
					this.amountPx = 'amount desc'
				} else if (this.amountPx == 'amount desc') {
					this.amountPx = 'amount asc'
				}
				console.log(this.amountPx);
				this.page = 1
				this.marketAllList = []
				this.isGoodsInfo()
			},

			// 去购买
			goBuy(item) {
				if (item.is_member) {
					uni.$u.toast('不能购买自己出售的商品');
				} else {
					this.showPay = true,
					this.showWant = false
					this.temporary = item
				}
			},
			// 立即支付
			submitPay() {
				// 判断用户时候可以购买
				this.showWant = true
			},
			// 立即购买
			goPay() {
				let productCacheInfo = {
					allMoney: this.temporary.actual,
					notice:this.nodeCentent,
					selectId:this.temporary.id,
					type:this.jfType
				}
				uni.setStorageSync("productCacheInfo", productCacheInfo)
				uni.navigateTo({
					url: '/pagesMy/brandCenter/paymentCenterOther'
				})
			},
			// 触底加载
			isScrolltolower(e) {
				console.log(e);
				// if (!this.scrollStatus) {
				// 	this.page += 1
				// 	this.isGoodsInfo()
				// }
			},
		},

		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.isGoodsInfo()
			}
		},

	}
</script>

<style scoped>
	.box {
		position: relative;
		z-index: 99;
		width: 750rpx;
		height: 100vh;

	}

	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	.commodity {
		width: 560rpx;
		margin: 0 auto;
		margin-top: -90rpx;
	}

	.commodity_top {
		position: relative;
		width: 92%;
		height: 580rpx;
		margin: 0 auto;
		z-index: 7;
	}

	.tupians {
		position: absolute;
		top: 20rpx;
		left: 50%;
		width: 100%;
		height: 560rpx;
		transform: translateX(-50%);
		z-index: 5;
	}

	.commodity_btm {
		position: relative;
		width: 532rpx;
		height: 282rpx;
		background: url(../../static/image/bg12.png);
		background-size: 100% 100%;
		margin: 0 auto;
		z-index: 6;
	}

	.commodity_btm_box {
		width: 58%;
		margin-top: 120rpx;
	}

	.commodity_name {
		font-size: 36rpx;
		margin-bottom: 30rpx;
		text-align: center;
	}

	.names {
		font-size: 36rpx;
		color: #9E845F;
	}

	.namess {
		color: #9E845F;
		font-size: 30rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		color: #9E845F;
	}


	.issuer {
		width: 690rpx;
		margin: 0 auto;

	}

	.issuer_box {
		width: 100%;
		height: 116rpx;
		border-radius: 20rpx;
		background: #F2F2F2;
	}

	.issuer_box>image {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		margin: 0 26rpx;
	}

	.issuer_btm {
		width: 78%;
	}

	.issuer_btm>text:nth-child(2) {
		/* background: pink; */
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}


	.equity {
		width: 100%;
		font-size: 32rpx;
	}

	.equity_top {
		width: 100%;
		height: 86rpx;
		line-height: 86rpx;
		padding-left: 24rpx;
	}

	.notice_box {
		width: 690rpx;
		background: #F2F2F2;
		border-radius: 20rpx;
		margin: 24rpx auto;
		padding-bottom: 20rpx;
	}

	.notice {
		width: 100%;
		padding: 20rpx 0;
	}

	.notice>text:nth-child(2) {
		font-size: 36rpx;
		color: #A68A64;
		font-family: 'iconfont2';
		margin: 0 24rpx;
	}

	.tiao {
		width: 154rpx;
		height: 6rpx;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
		border-radius: 4rpx;
	}

	.xuzhi {
		width: 660rpx;
		margin: 0 auto;
		padding: 0 50rpx;
		overflow: auto;
	}

	.colors {
		color: #666666;
		line-height: 1.6;
	}

	.technology {
		width: 100%;
		/* background: pink; */
	}

	.technology>image {
		width: 70%;
		height: 60rpx;
	}

	.buy_btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 152rpx;
		background: #ffffff;
	}


	.caise {
		width: 224rpx;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 36rpx;
		border: 1rpx solid #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		color: #ffffff;
		border: none !important;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
	}

	.ssss {
		width: 690rpx;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 36rpx;
		border: 1rpx solid #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		color: #ffffff;
		border: none !important;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
	}


	.scroll-Y {
		min-height: 400rpx;
		max-height: 1300rpx;
	}

	.want_box {
		position: fixed;
		z-index: 500;
		bottom: 0;
		width: 100%;
		min-height: 400rpx;
		max-height: 1300rpx;
		background: #E0DDDA;
		border-radius: 20rpx 20rpx 0 0;
		color: #333333;
	}

	.want {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		padding: 40rpx 0 40rpx 40rpx;
		border-bottom: 1rpx solid #ffffff10;
	}


	.choice {
		width: 100%;
		padding: 0 40rpx;
		margin: 30rpx 0;
	}

	.choice>text {
		width: 132rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 40rpx;
		border: 2rpx solid #A68A64;
		color: #A68A64;
	}

	.choice_l {
		width: 132rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		background: #F2F2F2;
		border-radius: 40rpx;
	}

	.choice_r {
		margin-left: 10rpx;
	}


	.csqx {
		position: relative;
		width: 670rpx;
		height: 184rpx;
		border-radius: 22rpx;
		margin: 20rpx auto;
		background: #F2F2F2;
	}

	.me_daoj {
		opacity: 0.5 !important;
	}

	.mys {
		padding: 0rpx 14rpx;
		border-radius: 10rpx;
		color: #ffffff !important;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
	}

	.list_s_box {
		width: 100%;
		padding: 10rpx 32rpx;
		margin-top: 20rpx;
	}

	.list_s_box>text:nth-child(1) {
		width: 75%;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.selects {
		width: 10%;
	}

	.selects>image {
		width: 36rpx;
		height: 36rpx;
	}

	.fhtb {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.batch {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 150rpx;
		background: #FFFFFF;
	}

	.batch_l {
		width: 60%;
		padding-left: 40rpx;
	}

	.batch_l_t {
		color: #333333;
		margin-bottom: 20rpx;
	}

	.batch_l_t>text {
		margin-right: 30rpx;
	}

	.batch_r {
		width: 40%;
	}


	.batch_r>text {
		width: 224rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		font-size: 32rpx;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
		border-radius: 40rpx;
		color: #ffffff;
	}

	.pay {
		width: 100%;
		background: #E0DDDA;
		border-radius: 20rpx 20rpx 0 0;
		color: #333333;
		overflow: auto;
	}


	.pay>text {
		font-size: 36rpx;
		margin: 60rpx 0;
	}

	.pay_box {
		width: 694rpx;
		background: #F2F2F2;
		border-radius: 18rpx;
	}

	.pay_box_c {
		font-size: 24rpx;
		padding: 28rpx 28rpx 0;
	}

	.pay_box_c>text:nth-child(1) {
		color: #666666;
	}

	.pay_box_c>text:nth-child(2) {
		width: 70%;
		text-align: right;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}


	.pay_money {
		width: 92%;
		padding: 30rpx 0;
		margin: 30rpx auto 0;
		font-size: 24rpx;
		border-top: 1rpx solid #ffffff20;
	}

	.pay_img {
		width: 32rpx;
		height: 32rpx;
	}

	.go_pay {
		font-size: 36rpx;
		font-family: 'iconfont2';
		margin-left: 10rpx;
	}

	.buyNow {
		width: 690rpx;
		height: 88rpx;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
		border-radius: 40rpx;
		margin: 46rpx 0;
		color: #ffffff;
	}
</style>